<template>
  <div class="app-container">
    <git-navigation />
    <el-col :span="22" :offset="1">
      <el-select
        v-model="currentBranch"
        :loading="branchLoading"
        @visible-change="getBranchTag"
        @change="fetchData"
      >
        <el-option-group label="分支">
          <el-option
            v-for="branchItem in branches"
            :key="branchItem.name"
            :label="branchItem.name"
            :value="branchItem.name"
          />
        </el-option-group>
        <el-option-group label="标签">
          <el-option
            v-for="itemTage in tags"
            :key="itemTage.name"
            :label="itemTage.name"
            :value="itemTage.name"
          />
        </el-option-group>
      </el-select>
      <span class="ml20">{{ this.$route.params.projectName }}</span>
      <el-input placeholder="按提交消息过滤" class="submitSearch" />
      <el-divider />
      <template v-for="(itemList, index) in list">
        <el-row class="commit-bar" :gutter="10">
          <el-col :span="6">
            <span>{{ index }}·{{ itemList.num }}次提交</span>
          </el-col>
        </el-row>
        <el-row v-for="commitItem in itemList.commits" class="group-bottom" :gutter="10">
          <el-col :span="1">
            <el-avatar class="mt20" shape="circle" :src="commitItem.avatar" />
          </el-col>
          <el-col style="margin-left:-30px;" :span="11">
            <ul>
              <li class="li-msg" :title="commitItem.commit.message">
                <router-link
                  :underline="false"
                  :to="commitDetailUrl(commitItem.commit.id)"
                >{{ commitItem.commit.message }}</router-link>
              </li>
              <li>
                <span
                  class="commit-desc"
                >由 {{ commitItem.commit.committer_name }} 提交于 {{ commitItem.commit.committed_date | filterTime }}</span>
              </li>
            </ul>
          </el-col>
          <el-col :span="5" :offset="7">
            <el-button-group class="commit-detail">
              <el-button>
                <router-link
                  :to="commitDetailUrl(commitItem.commit.id)"
                >{{ commitItem.commit.short_id }}</router-link>
              </el-button>
              <el-button>
                <i
                  v-clipboard:copy="commitItem.commit.id"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                  class="el-icon-document-copy"
                />
              </el-button>
              <el-button @click="openFile(commitItem.commit.id)">
                <i class="el-icon-folder-opened" />
              </el-button>
            </el-button-group>
          </el-col>
        </el-row>
      </template>
      <el-row class="mt20 flr">
        <el-button-group>
          <el-button
            type="primary"
            style="margin-right:10px"
            size="mini"
            :disabled="allowChangePage(-1)"
            @click="changePage(-1)"
          >上一页</el-button>
          <el-button
            type="primary"
            size="mini"
            class="mr10"
            :disabled="allowChangePage(1)"
            @click="changePage(1)"
          >下一页</el-button>
        </el-button-group>前往
        <el-input
          v-model="page"
          size="mini"
          min="1"
          style="width: 80px"
          autocomplete="off"
          @change="changePage(0)"
        />页
      </el-row>
    </el-col>
  </div>
</template>

<script>
import { getData } from '@/api/requestData';
import { parseTime } from '@/utils/index';
import GitNavigation from './components/GitNavigation';

export default {
  components: {
    GitNavigation
  },
  filters: {
    filterTime(time) {
      return parseTime(time, '{h}:{i}:{s}');
    }
  },
  data() {
    return {
      pid: this.$route.params.pid,
      pname: this.$route.params.projectName,
      branches: [],
      tags: [],
      listLoading: true,
      currentBranch: '',
      branchLoading: true,
      list: [],
      listLength: 0,
      dateScope: [],
      page: 1,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      }
    };
  },
  created() {
    this.currentBranch = this.$route.query.branch
      ? this.$route.query.branch
      : 'master';
    this.fetchData();
  },
  methods: {
    changePage(page) {
      if (page === -1) {
        this.page--;
      } else if (page === 1) {
        this.page++;
      }
      this.fetchData();
    },
    fetchData() {
      const pid = this.$route.params.pid;
      const params = {
        ref: this.currentBranch,
        page: this.page,
        perPage: 100
      };
      if (this.dateScope[0] !== undefined) {
        params['startTime'] = this.dateScope[0];
        params['endTime'] = this.dateScope[1];
      }
      getData('/git/public/commit/list/' + pid, params)
        .then((res) => {
          this.listLoading = true;
          for (var index in res.data) {
            this.listLength += res.data[index].commits.length;
          }
          this.list = Object.keys(res.data)
            .reverse()
            .reduce(function(a, b) {
              a[b] = res.data[b];
              return a;
            }, {});
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = true;
        });
    },
    // 点击分支select加载数据
    getBranchTag() {
      const pid = this.$route.params.pid;
      getData('/git/public/branch/tag/' + pid).then((res) => {
        this.branches = res.data.branches;
        this.tags = res.data.tags;
        this.branchLoading = false;
      });
    },
    onCopy(e) {
      // 复制成功
      this.$message.success('复制成功');
    },
    onError(e) {
      // 复制失败
      this.$message('复制失败');
    },
    openFile(commitId) {
      const pid = this.$route.params.pid;
      const pname = this.$route.params.projectName;
      this.$router.push({
        path: '/git/code/' + pid + '/' + pname + '/' + commitId + '/root'
      });
    },
    commitDetailUrl(sha) {
      return '/git/commit/detail/' + this.pname + '/' + this.pid + '/' + sha;
    },
    allowChangePage(type) {
      const page = this.page;
      if (type === -1 && page === 1) {
        return true;
      }
      if (type === 1 && this.listLength < 100) {
        return true;
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import '../../styles/main.css';
.submitSearch {
  float: right;
  width: 200px;
}
.commit-bar {
  height: 40px;
  line-height: 40px;
  background-color: #fafafa;
  font-family: Microsoft YaHei, serif;
}

.group-bottom {
  border-bottom: 1px solid #f0f0f0;
}

.commit-desc {
  font-family: Microsoft YaHei, serif;
  font-size: small;
}
.commit-detail {
  margin-right: -30px;
  margin-top: 14px;
  float: right;
}

li {
  list-style: none;
  padding: 1px 1px;
}

.li-msg {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
